<template>
	<div style="height:80vh">
		<div style="display: flex; justify-content: space-between;">
			<h3>课程管理</h3>
			<p></p>
			<h4><button @click="go2Add()">添加新课程</button></h4>
			<p></p>
		</div>
		<hr>
		<div style="position: relative;">
			<div>
				<div style="width: 90% ;">
					<table border="1" style="width: 95%">
						<tr style="background-color: gainsboro">
							<th>班级编号</th>
							<th>班级名称</th>
							<th>修改操作</th>
							<th>删除操作</th>
						</tr>
						<tr v-for="course in courses">
							<td>{{course.cno}}</td>
							<td>{{course.cname}}</td>
							<td><button @click="go2Update(course)">修改</button></td>
							<td><button @click="del(course.cno)">删除</button></td>
						</tr>
					</table>
				</div>
			</div>
			<div id="data" style="position: absolute;" v-show="inState == true">
				<div style="background-color: aqua;width: 100%;height: 5vh;font-size: 1.5rem;">
					课程 - {{stateName[state]}}
				</div>
				<br />
				<table width="80%" align="center" border="1" cellspacing="0" style="line-height: 35px;">
					<tbody>
						<tr>
							<td>课程编号</td>
							<td><input type="text" v-model="course.cno" v-bind:readonly="state==0" /></td>
						</tr>
						<tr>
							<td>课程名称</td>
							<td><input type="text" v-model="course.cname" /></td>
						</tr>
					</tbody>
				</table>
				<div style="display: flex; justify-content: space-between;">
					<p>&nbsp;</p>
					<p><button @click="inState=false;">取消</button></p>
					<p><button @click="save()">保存</button></p>
					<p>&nbsp;</p>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "AdmCourse",
		data() {
			return {
				course: {},
				courses: [],
				stateName: ['修改', '添加'],
				state: 1 ,// 0 修改    1  添加
				inState:false
			}
		},
		methods: {
				go2Add() {
						this.state = 1;// 添加
						this.course = {};// 重置对象变量为初始
						this.inState = true;// 弹出添加窗口
				},
				go2Update(obj) {
					console.log(obj);
					this.state = 0;// 修改
					this.inState = true;// 弹出窗口
					this.course = JSON.parse(JSON.stringify(obj)); // 初始化对象并赋值
				},	
			    save() {
					//三目运算获取得到url
					let url = this.state == 0 ? this.$ip + "/api/adm/course/update":this.$ip + "/api/adm/course/add";
					var that = this;
					//type走JSON格式
					this.$axios.post(url,this.course,this.$store.state.user.to)
					.then(function (resp) {
						console.dir(resp.data.data)
						that.courses = resp.data.data
						that.state = -1
						that.inState = false
						}
					)
				},
				del(id){
					let that = this
					let url = this.$ip + "/api/adm/course/del?cno=" + id;
					this.$axios.get(url,this.$store.state.user.to)
					.then(function (resp){
						console.dir(resp.data.data)
						that.courses = resp.data.data;
					})
				}
		},
		mounted() {
			var that = this;
			this.$axios.get(`${this.$ip}/api/adm/course/findAll`, this.$store.state.user.to).then(function(resp) {
				console.log(resp.data);
				
				that.courses = resp.data.data
			})
		}
	}
</script>

<style>
	#data {
		position: absolute;
		background-color: blanchedalmond;
		z-index: 1;/* 显示在最顶层 */
		width: 50%;/* 设置弹出框的跨度 */
		left: 25%;/* 设置弹出框到左边的距离 */
		top: 10vh;/* 设置弹出框到下边的距离 */
		opacity: 0.9;
	}
</style>